<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page pageEncoding="UTF-8" %>
<%@ page session="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE HTML>
<html lang=zh-CN>
<head>
    <c:import url="/WEB-INF/views/head/inc.jsp">
        <c:param name="title" value="用户注册"/>
    </c:import>
    <style>
            /* form */
        form {
            font-family: sans-serif;
            margin-top: 21px;
            padding-top: 22px;
            border-top: 1px solid #d7d7d7;
            font-size: 14px;
        }

        form>p {
            display: table;
            margin: 8px 0;
            padding: 0 22px;
        }

        form label {
            display: table-cell;
            width: 60px;
            padding-right: 15px;
            text-align: right; /*font-weight: bold;*/
            vertical-align: top;
        }

        form>p img {
            padding-left: 15px;
        }

        form input[type="text"], form input[type="password"], form input[type="email"], form input[type="url"] {
            display: table-cell;
            width: 160px;
            height: 20px;
            border: 1px solid #b7b7b7;
            vertical-align: bottom;
        }

        form input[type="password"] {
            font-family: Arial;
        }

        form input[type="submit"] {
            margin: 0 10px 0 75px;
        }

    </style>
</head>
<body>
<div style="width:800px;margin: 20px auto;">
    <form id="UserDTO" action="/register" method="post">
        <h2>用户注册</h2>

        <p style="color:red;">${error}</p>

        <p>
            <label for="username-in">帐号</label>
            <input id="username-in" name="username" required type="text" placeholder='4-15位'>
        </p>

        <p>
            <label for="password-in">密码</label>
            <input id="password-in" name="password" required="required" type="password" placeholder="6-25位">
        </p>

        <%--<p>
            <label for="confpass-in">确认密码</label>
            <input id="confpass-in" name="confpass" required="required" type="password">
            <em>请再次输入密码</em>
        </p>--%>

        <p>
            <label for="email-in">邮箱</label>
            <input id="email-in" name="email" required="required" type="email" placeholder="请输入您常用的邮箱">
        </p>

        <%--<p>
            <label for="verify-in">验证码</label>
            <input id="verify-in" name="verify" required="required" type="text">
            <img src="verify.img" id="verify-image" alt="0" onclick="reloadcode();">
        </p>--%>

        <p>
            <input type="submit" value="提交"/>
            <input type="reset" value="重填"/>
        </p>
    </form>

    <hr>
    <p><a href="login">登录</a></p>
</div>

<script type="text/javascript">
    function reloadcode() {
        var verify = document.getElementById('verify-image');
        // 这里必须加入随机数不然地址相同无法重新加载
        verify.setAttribute('src', 'verify.img?' + Math.random());
    }
</script>
</body>
</html>